<template>
  <view
    class="viewport"
    :style="{ paddingTop: menuButton.top + menuButton.height + 20 + 'px' }"
  >
    <!-- 地址信息 -->
    <view class="form">
      <view class="form-item">
        <text class="label">姓名</text>
        <input
          v-model="form.receiver"
          placeholder-style="color: #888"
          placeholder="请填写收货人姓名"
        />
      </view>
      <view class="form-item">
        <text class="label">手机号码</text>
        <input
          v-model="form.contact"
          placeholder-style="color: #888"
          placeholder="请填写收货人手机号码"
        />
      </view>
      <view class="form-item">
        <text class="label">省/市/县 (区)</text>
        <picker @change="regionChange" mode="region" :value="form.fullLocation">
          <view v-if="form.fullLocation" class="region">
            {{ form.fullLocation }}
          </view>
          <view v-else class="placeholder"> 请填写收货人所在城市 </view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label">详细地址</text>
        <input
          v-model="form.address"
          placeholder-style="color: #888"
          placeholder="街道、楼牌号信息"
        />
      </view>
      <view class="form-item">
        <text class="label">设置默认地址</text>
        <switch
          @change="onChangeDefault"
          :checked="form.isDefault === 1"
          color="#27ba9b"
        />
      </view>
    </view>
    <!-- 提交按钮 -->
    <view class="button" @tap="submitForm"> 保 存 </view>
  </view>
</template>
<script setup>
import { ref, onMounted } from "vue";
import {
  addressAPI,
  updateAddressAPI,
  getAddressDetailAPI,
} from "@/api/category";
import { onLoad } from "@dcloudio/uni-app";
const menuButton = ref(uni.getMenuButtonBoundingClientRect());

const form = ref({
  address: "", // 详细地址
  contact: "", // 联系方式
  isDefault: 0, // 是否为默认，1为是，0为否
  receiver: "", // 收货人姓名
  fullLocation: "", // 省市县
  countyCode: "", // 所在区/县编码
  cityCode: "", // 所在城市编码
  provinceCode: "", // 所在省份编码
});

// const onChangeDefault = (e)=>{
//   isDefault.value = e.detail.value ? 1 : 0;
// }

const regionChange = (e) => {
  // 省市区数据显示
  const { code, value } = e.detail;
  // value 是前端展示的省市区 code是后台需要的编码
  form.value.fullLocation = value.join("");
  // code 是传递给后端的编码
  form.value.provinceCode = code[0];
  form.value.cityCode = code[1];
  form.value.countyCode = code[2];
};

const formID = ref("");
const submitForm = async () => {
  if (!formID) {
    // 新增地址请求
    await addressAPI(form.value);
  } else {
    // 修改地址数据请求
    const obj = { ...form.value };
    delete obj.id;
    await updateAddressAPI(formID.value,obj);
  }
  uni.showToast({
    title: form.id ? "保存成功" : "新增成功",
    icon: "success",
  });
  setTimeout(() => {
    uni.navigateBack();
  }, 1000);
};

onLoad(async ({ id }) => {
  if (id) {
    formID.value = id;
    const { result } = await getAddressDetailAPI(id); // 获取地址数据
    form.value = { ...result };
  }
});
</script>
<style lang="scss">
page {
  background-color: #f4f4f4;
}
.form {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  .form-item {
    display: flex;
    min-height: 96rpx;
    line-height: 46rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    &:last-child {
      border: none;
    }
    .label {
      width: 200rpx;
      color: #333;
    }
    input {
      flex: 1;
      display: block;
      height: 46rpx;
    }
    switch {
      position: absolute;
      right: -10rpx;
      transform: scale(0.7) translateY(-8px);
    }
    picker {
      flex: 1;
    }
    .region {
      color: #333;
    }
    .placeholder {
      color: #888;
    }
  }
}
.button {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
